<template>
	<div class="user">
		<div class="user-header">
			<div class="user-header-no"
				@click="goLogin()"
				v-show="!list.avatar && isLoadDom"
			>
				<img :src="imgUrl" />
				<p>登录/注册</p>
			</div>
			<div class="user-header-y"
				v-show="list.length != 0 && isLoadDom"
			>
				<img v-lazy="list.avatar" @click="goInfo()"/>
				<div class="uhy-right">
					<div class="uhy-top">
						<p>{{list.nickname}}</p>
						<p class="lv">{{list.agent_name}}</p>
					</div>
					<div class="user-header-footer">						
						<p class="code">邀请码：{{list.invite_code}}</p>
						<p class="copy"
							v-clipboard:copy="list.invite_code"
							v-clipboard:success="onCopy"
							v-clipboard:error="onError"
						>复制</p>
					</div>
				</div>
				
				<div class="improve-lv"
					v-if="list.agent_level!=0 && list.agent_level!=2"
					@click="goLv()"
				>
					<i class="lv-icon"></i>
					<p>我要升级</p>
				</div>
			</div>
			<div class="uh-bg"></div>
			<i class="iconfont setting" @click="goUset()">&#xe6e7;</i>
		</div>
		<div class="profit">
			<!-- <div class="profit-header"
				@click="goWithdraw()"
			>
				<div class="ph-left">
					<p>可提现金额 ￥{{list.credit || 0}}</p>
					<span>每月25号结算上月收入</span>
				</div>
				<div class="ph-right">
					<label>立即提现</label>
				</div>
			</div> -->
			<div class="profit-content"
				@click="goProfit()"
			>
				<div class="pc-item">
					<p class="price">￥{{incomeList.predict_income || 0}}</p>
					<p>本月预估</p>
				</div>
				<div class="pc-item">
					<p class="price">￥{{incomeList.bill_income || 0}}</p>
					<p>本月结算</p>
				</div>
				<div class="pc-item">
					<p class="price">￥{{incomeList.last_income || 0}}</p>
					<p>上月结算</p>
				</div>
			</div>
		</div>
		<div class="sta-img" v-if="this.imgList[0]">
			<swiper :options="swiperOption">
				<swiper-slide v-for="(banner, index) in imgList"
					:key="index"
				>
					<img :src="banner" 
						:key="banner"
					/>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<div class="order-items">
			<div class="order-items-con">
				<div class="order-items-header border-1px">
					<div class="oih-left">
						<p>我的订单</p>
					</div>
				</div>
				<div class="order-items-content">
					<div class="order-item small"
						@click="goOrder()"
					>
						<img src="../assets/img/all_order_icon.png" />
						<p>全部订单</p>
					</div>
					<div class="order-item small"
						@click="goOrder()"
					>
						<img src="../assets/img/balance_order_icon.png" />
						<p>已结算</p>
					</div>
					<div class="order-item small"
						@click="goOrder()"
					>
						<img src="../assets/img/payment_order_icon.png" />
						<p>已付款</p>
					</div>
					<div class="order-item small"
						@click="goOrder()"
					>
						<img src="../assets/img/close_order_icon.png" />
						<p>已失效</p>
					</div>
				</div>
			</div>						
		</div>
		<div class="order-items"
			v-if="list.agent_level > 0"
		>
			<div class="order-items-con">
				<div class="order-items-header border-1px">
					<div class="oih-left">
						<p v-if="list.agent_level == 1">{{agent_disname}}中心</p>
						<p v-if="list.agent_level == 2">{{team_disname}}中心</p>
					</div>
					<!-- <div class="oih-right">
						<p>进入>></p>
					</div> -->
				</div>
				<div class="order-items-content">
					<div class="order-item"
						@click="goProfit()"
					>
						<img src="../assets/img/user_icon_money.png" />
						<p>收益</p>
					</div>
					<div class="order-item"
						@click="goOrder()"
					>
						<img src="../assets/img/user_order_icon.png" />
						<p>订单</p>
					</div>
					<div class="order-item"
						@click="goTeam()"
					>
						<img src="../assets/img/user_icon_qianbao.png" />
						<p>团队</p>
					</div>
					<div class="order-item"
						@click="goWithdraw()"
					>
						<img src="../assets/img/user_icon_myteam.png" />
						<p>提现</p>
					</div>
				</div>
			</div>						
		</div>
		<div class="applyAgent"
			v-if="list.agent_level == 0 || team_bool == 1 && list.agent_level != 2"
		>
			<div class="aa-content"
				@click="goApply(1)"
				v-if="list.agent_level == 0"
			>
				<div class="aac-c">
					<i class="icon"></i>
					<div class="aac-right">
						<p>申请成为{{agent_disname}}·享受更多权益</p>
						<span>自购省钱·邀请好友赚钱</span>
					</div>
				</div>
				
				<i class="iconfont">&#xe6a7;</i>
			</div>
			<div class="aa-content"
				@click="goApply(2)"
				v-if="team_bool == 1 && list.agent_level != 2"
			>
				<div class="aac-c">
					<i class="icon"></i>
					<div class="aac-right">
						<p>申请成为{{team_disname}}·让你轻松赚钱</p>
						<span>自购省钱·邀请好友赚钱</span>
					</div>
				</div>				
				<i class="iconfont">&#xe6a7;</i>				
			</div>			
		</div>
		<div class="content">
			<div class="c-items">
				<div class="c-item border-1px"
					@click="goInvite()"
				>
					<i class="icon iconfont">&#xe63e;</i>
					<span>邀请分享</span>
				</div>
				<div class="c-item border-1px"
					@click="goCollect()"
				>
					<i class="icon-collect"></i>
					<span>我的收藏</span>
				</div>
				<div class="c-item border-1px"
					@click="goHistory()"
				>
					<i class="icon-scan"></i>
					<span>我的足迹</span>
				</div>
				<div class="c-item border-1px"
					@click="goAssist()"
				>
					<i class="icon-help"></i>
					<span>帮助中心</span>
				</div>
				<div class="c-item border-1px"
					@click="goFresh()"
				>
					<i class="icon-fresh"></i>
					<span>新手教程</span>
				</div>
				<div class="c-item border-1px"
					@click="goService()"
				>
					<i class="icon-service"></i>
					<span>联系客服</span>
				</div>
				<div class="c-item"
					@click="goUset()"
				>
					<i class="icon-setting"></i>
					<span>设置中心</span>
				</div>
			</div>			
		</div>
		<BotNav :cateindex=4></BotNav>
	</div>
</template>
<script>
	import axios from 'axios'
	import BotNav from '../components/BotNav.vue'
    import * as types from '../store/types.js'
	import Http from '../http.js'
	import { Toast } from 'mint-ui'
	export default{
		components :{
			BotNav
		},
		data(){
			return{
				imgList: [],
				list: [],
				swiperOption: {
		          	pagination: {
		            	el: '.swiper-pagination',
		            	dynamicBullets: true
		          	}
		        },
				imgUrl: window.localStorage.getItem("app_logo_image"),
				incomeList: [],
				agent_disname: window.localStorage.getItem("agent_disname"),
				team_disname: window.localStorage.getItem("team_disname"),
				team_bool: window.localStorage.getItem("team_bool"),
				wx_login: window.localStorage.getItem("wx_login"),
				isLoadDom: false
			}
		},
		beforeRouteEnter (to, from, next) {
			if (from.name == '登录') {
				window.location.reload();
				next()
			}else{
				next();
			}
		},
		created(){			
			axios.post(Http.USERIDEX)
			.then( res => {
				const ret =res.data;
				if(ret.code == 1){
					this.list = ret['data'];
				}				
			})
			axios.post(Http.TOTALINCOME)
			.then( res => {
				const ret =res.data;				
				if(ret.code == 1){
					this.incomeList = ret['data'];
				}else{
					this.list = [];
				}
			})
			axios.post(Http.UserCenter)
			.then( res => {
				const ret =res.data;				
				this.imgList = ret.data.setting.ad_image;
			})
		},
		updated(){
			this.isLoadDom = true;
		},
		methods: {
			onCopy: function (e) {
		        Toast('你刚刚复制了: ' + e.text)
		    },
		    onError: function (e) {
		        Toast('无法复制文本！')
		    },
		    goOrder:function(){
		    	this.$router.push({
		    		path: '/user/order'
		    	})
		    },
		    goProfit: function(){
		    	this.$router.push({
		    		path: '/user/profit',
		    		query: {
                        credit: this.list.credit
					}
		    	})
		    },
		    goTeam: function(){
		    	this.$router.push('/user/team')
		    },
		    goLv: function(){
		    	this.$router.push('/user/level')
		    },
		    goWithdraw: function(){
		    	this.$router.push('/user/withdraw')
		    },
		    goUset: function(){
		    	this.$router.push('/user/setting')
		    },
		    goService: function(){
		    	this.$router.push('/user/service')
		    },
		    goCollect: function(){
		    	this.$router.push('/collect/list')
		    },
		    goCenter: function(){
		    	this.$router.push('/agent/center')
		    },
		    goApply: function(id){
		    	if(id==1){
		    		this.$router.push('/apply/agent')
		    	}else{
		    		this.$router.push('/improve/lv')
		    	}		    	
		    },
		    goInvite: function(){
		    	this.$router.push('/user/invite')
		    },
		    goHistory: function(){
		    	this.$router.push('/user/history')
		    },
			goLogin: function(){
				if (this.wx_login == 1) {
					this.$router.push('/auther')
				}else{
					this.$router.push('/login')
				}
			},
			goInfo: function(){
				this.$router.push('/user/info')
			},
			goAssist(){
				this.$router.push('/user/assist')
			},
			goFresh(){
				this.$router.push('/user/fresh')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.user{
		.user-header{
			position: relative;
			padding-top: 0.8rem;
			height: 2.3rem;
			background: url(../assets/img/me_bg.png) top center no-repeat;
			background-size: 100%;
			.setting{
				position: absolute;
				top: 0;
				right: 0;
				width: 0.88rem;
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.44rem;
				color: #fff;
			}
			.uh-bg{
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 1rem;
				background: url(../assets/img/user_bg.png) bottom left no-repeat;
				background-size: 100% 100%;
			}
			.user-header-y{
				position: relative;
				margin-top: 0.4rem;
				padding: 0 0.24rem;
				display: flex;
				img{
					margin-right: 0.2rem;
				}
				.uhy-right{
					text-align: left;
					.uhy-top{
						display: flex;
						align-items: flex-end;
						p{
							font-size: 0.34rem;
						}
						.lv{
							margin-left: 0.2rem;
							padding: 0 0.1rem;
							height: 0.28rem;
							line-height: 0.28rem;
							border-radius: 0.28rem;
							background: #d29881;
							font-size: 0.20rem;
							color: #9a4404;
						}
					}
					.user-header-footer{
						margin: 0.2rem 0;
						display: flex;
						align-items: center;
						.code{
							font-size: 0.20rem;
							color: rgba(256,256,256,0.8)
						}
						.copy{
							margin: 0 0.2rem;
							padding: 0 0.2rem;
							height: 0.34rem;
							line-height: 0.34rem;
							border-radius: 0.44rem;
							background: rgba(0,0,0,0.2);
							font-size: 0.20rem;
							color: rgba(256,256,256,0.6);
						}
						
					}
				}
				.improve-lv{
					position: absolute;
					top: 0;
					right: 0;
					z-index: 2;
					display: flex;
					align-items: center;
					height: 0.4rem;
					line-height: 0.4rem;
					padding: 0 0.1rem;
					border-radius: 0.4rem 0 0 0.4rem;
					background: rgba(0,0,0,0.4);
					.lv-icon{
						margin-right: 0.1rem;
						width: 0.34rem;
						height: 0.34rem;
						background: url(../assets/img/page_main_user_credits.png) center center no-repeat;
						background-size: contain;
					}
					p{
						font-size: 0.2rem;
						color: #fff;
					}
				}
			}
			.user-header-no{
				position: relative;
    			z-index: 2;
			}
			img{
				margin-bottom: 0.3rem;
				width: 1rem;
				height: 1rem;
				border-radius: 1rem;
				background: #ff6a6b;
			}
			p{
				font-size: 0.28rem;
				color: #fff;
			}
		}
		.profit{
			margin: 0 4%;
			width: 92%;
			margin-bottom: 0.2rem;
			.profit-content{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0.1rem 0.24rem;
				// background: linear-gradient(to left, #3e3e3e, #222);
				background: #fff;
				.pc-item{
					flex: 0 0 33.33%;
					color: #333;
					font-size: 0.24rem;
					.price{
						margin-bottom: 0.1rem;
						color: #ff0016;
						font-size: 0.28rem;
					}
				}
			}
		}
		.sta-img{
			background: #f5f5f5;
			padding: 0.2rem 4%;
			padding-bottom: 0;
			.swiper-container{
				width: 100%;
				box-shadow: 0 0.1rem 0.1rem #f1f1f1;
				border-radius: 0.2rem;
				overflow: hidden;
				img{
					width: 100%;
					heihgt: 1.34rem;
				}
			}
		}
		.order-items{
			background: #f5f5f5;
			width: 100%;
			padding-top: 0.2rem;
			.order-items-con{
				background: #fff;
				box-shadow: 0 0.1rem 0.1rem #f1f1f1;
				width: 92%;
				margin: 0 4%;
				border-radius: 0.2rem;
				.order-items-header{
					display: flex;
					justify-content: space-between;
					padding: 0 0.2rem;
					height: 0.66rem;
					line-height: 0.66rem;
					text-align: left;
					.oih-left{
						font-size: 0.26rem;
						font-weight: bold;
					}
					.oih-right{
						font-size: 0.24rem;
						color: #999;
					}
				}
				.order-items-content{
					display: flex;
					align-items: center;
					padding: 4% 0;				
					.order-item{
						flex: 0 0 25%;
						&.small{
							img{
								width: 0.54rem;
								margin-bottom: 0.2rem;
							}
						}
						img{
							width: 0.88rem;
						}
						p{
							font-size: 0.24rem;
							color: #999;
						}
					}
				}
			}			
		}
		.applyAgent{
			padding-top: 0.2rem;
			background: #f5f5f5;
			.aa-content{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 84%;
				margin: 0 4%;
				padding: 0 4%;
				background: #fff;
				border-radius: 0.2rem;
				box-shadow: 0 0.1rem 0.1rem #f1f1f1;
				&:nth-of-type(2){
					margin-top: 0.2rem;
				}
				.aac-c{
					flex: 0 0 90%;
					display: flex;
					align-items: center;
					.icon{
						height: 1rem;
						width: 1rem;
						padding: 4%;
						background: url(../assets/img/red_bg.gif) center center no-repeat;
						background-size: 1rem; 
					}
					.aac-right{
						flex: 1;
						text-align: left;
						p{
							margin-bottom: 0.1rem;
							font-size: 0.26rem;
							color: #333;
							text-align: left;
						}
						span{
							font-size: 0.22rem;
							color: #999;
							text-align: left;
						}
					}
					
				}
				
			}
		}
		.content{
			padding: 1rem 4%;
			padding-top: 0.2rem;
			background: #f5f5f5;
			.c-items{
				background: #fff;
				border-radius: 0.2rem;
				box-shadow: 0 0.1rem 0.1rem #f1f1f1;
				.c-item{
					height: 0.8rem;
					line-height: 0.8rem;
					text-align: left;
					font-size: 0.24rem;
					i{
						display: inline-block;
						margin-left: 0.1rem;
						width: 0.8rem;
						height: 0.8rem;
						font-size: 0.44rem;
						color: #c5c5c5;
						line-height: 0.8rem;
						text-align: center;
						&.icon-gift{
							background: url(../assets/img/user_icon_taobao.png) center center no-repeat;
							background-size: 0.44rem;
						}
						&.icon-collect{
							background: url(../assets/img/user_icon_like.png) center center no-repeat;
							background-size: 0.44rem;
						}
						&.icon-scan{
							background: url(../assets/img/user_icon_history.png) center center no-repeat;
							background-size: 0.44rem;
						}
						&.icon-help{
							background: url(../assets/img/user_icon_help.png) center center no-repeat;
							background-size: 0.44rem;
						}
						&.icon-fresh{
							background: url(../assets/img/user_xinshou.png) center center no-repeat;
							background-size: 0.44rem;
						}
						&.icon-service{
							background: url(../assets/img/user_kefu.png) center center no-repeat;
							background-size: 0.44rem;
						}
						&.icon-setting{
							background: url(../assets/img/user_setting.png) center center no-repeat;
							background-size: 0.44rem;
						}
					}
					span{
						vertical-align: top;
						display: inline-block;
						height: 0.8rem;
						color: #666;
					}
				}
			}
		}
	}
</style>